import React, { Component } from "react";
import FirstPlant from "./ContentComponent/FirstPlant";
import SecondPlant from "./ContentComponent/SecondPlant";
import ThreePlant from "./ContentComponent/ThreePlant";


import { getMsg, getMsgFormPubli } from '../../../network/layout'
class ContentComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      firstPlan: []
    };
  }

  getMsg() {
    getMsg().then(res => {
      let obj = [];
      console.log(res.result.list.length);
      // 将数据分段俩个一组添加到数组中
      for (let i = 0; i < res.result.list.length; i += 2) {
        obj.push((res.result.list).slice(i, i + 2));
      }
      this.setState({ firstPlan: obj })
    })
  }

  getMsgFormPubli = () => {
    getMsgFormPubli().then(res => {
      console.log(res);
    })
  }
  componentDidMount() {
    this.getMsgFormPubli();
    this.getMsg();
  }

  render() {
    const { firstPlan } = this.state;
    return (
      <div>
        <div className="upper-half">
          {/* 第一部分面板开始 */}
          <div className="content-title"><span>液氯储罐和液氯钢瓶储存单元532610036001（一级重大危险）低风险</span>
          </div>
          {
            firstPlan.map((data) =>
              <FirstPlant fakeJson={data} />
            )
          }
        </div>
        {/* 第一部分面板结束 */}
        <div className="bottom-half upper-half">
          {/* 第二部分面板开始 */}
          <div className="content-title"><span>可燃/有毒气体</span></div>
          <SecondPlant />
          {/* 第二部分面板结束 */}
          {/* 第三部分面板开始 */}
          <div className="content-title"><span>乙炔发生装置生产单元532610036003（三级重大危险）低风险</span></div>
          <ThreePlant />
          {/* 第三部分面板结束 */}
        </div>
      </div>
    );
  }
}
export default ContentComponent;
